<!--  <ul nz-menu>-->

<!--    <li nz-menu-item>-->
<!--      <i nz-icon nzType="upload"></i>上传任务-->
<!--    </li>-->
<!--    <li nz-menu-item>-->
<!--      <i nz-icon nzType="upload"></i>-->
<!--      离线下载-->
<!--    </li>-->
<!--  </ul>-->
  <nz-tabset nzType="card" class="upload-box" nzSelectedIndex="0">
    <nz-tab [nzTitle]="uploadTemplateTitle">
      <ng-template #uploadTemplateTitle>
        <i nz-icon nzType="upload" nzTheme="outline"></i>
        上传任务({{uploadService.uploadList.length}})
      </ng-template>
      <cdk-virtual-scroll-viewport itemSize="73" class="list-box">
        <ul nz-list [nzDataSource]="uploadService.uploadList"
          nzSize="large">
        <li nz-list-item nzNoFlex
            *ngFor="let task of uploadService.uploadList;index as id;">
          <nz-list-item-meta>
            <nz-list-item-meta-title>
              <div><a>{{ task.name }}</a></div>
              <nz-progress [nzPercent]="task.progress" [nzStrokeColor]="task.status=='normal'? '#83b4ef':''" [nzStatus]="task.status"></nz-progress>
              <ul nz-list-item-actions>
                <nz-list-item-action >
                  <a *ngIf="task.status=='active'"
                     nz-popover nzPopoverContent="暂停"
                     nzPopoverPlacement="topRight" nzPopoverTrigger="hover"
                     nz-icon nzType="pause-circle" nzTheme="outline"
                     (click)="this.uploadService.stop(task);task.status='normal'">
                  </a>
                  <a *ngIf="task.status!='active'&&task.status!='success'"
                     nz-popover nzPopoverContent="继续"
                     nzPopoverPlacement="topRight" nzPopoverTrigger="hover"
                     nz-icon nzType="play-circle" nzTheme="outline"
                     (click)="this.uploadService.start(task)">
                  </a>
                </nz-list-item-action>
                <nz-list-item-action >
                  <a nz-icon nzType="close-square" nzTheme="outline"
                     nz-popover [nzPopoverContent]="task.status=='success'?'删除':'取消上传'"
                     nzPopoverPlacement="topRight" nzPopoverTrigger="hover"
                     (click)="delTaskClick(task,id)">
                  </a>
                </nz-list-item-action>
              </ul>
              <span *ngIf="!task.finished">加载中...</span>
              <span *ngIf="task.finished">
                大小：{{(task.finished | nzBytes)}}/{{(task.size | nzBytes) }}{{task.type=='fast'? '（秒传）':''}}
              </span>
            </nz-list-item-meta-title>
          </nz-list-item-meta>
        </li>
      </ul>
      </cdk-virtual-scroll-viewport>
    </nz-tab>
    <nz-tab [nzTitle]="offlineTemplateTitle">
      <ng-template #offlineTemplateTitle>
        <i nz-icon nzType="cloud-download" nzTheme="outline"></i>
        离线下载({{uploadService.offlineList.length}})
      </ng-template>
      <cdk-virtual-scroll-viewport itemSize="73" class="list-box">
        <ul nz-list [nzDataSource]="uploadService.offlineList"
            nzSize="large">
          <li nz-list-item nzNoFlex
              *ngFor="let task of uploadService.offlineList;index as id;">
            <nz-list-item-meta>
              <nz-list-item-meta-title>
                <div>{{ task.file.name }}</div>
                <nz-progress [nzPercent]="task.progress" [nzStrokeColor]="task.nzStatus=='normal'? '#83b4ef':''" [nzStatus]="task.nzStatus"></nz-progress>
                <ul nz-list-item-actions>
                  <nz-list-item-action >
                    <a *ngIf="task.status=='fail'"
                       (click)="startOfflineClick(task);"
                       nz-popover nzPopoverContent="重试"
                       nzPopoverPlacement="topRight" nzPopoverTrigger="hover"
                       nz-icon nzType="play-circle" nzTheme="outline">
                    </a>
                  </nz-list-item-action>
                  <nz-list-item-action >
                    <span >
                    <a nz-icon nz-typography nzCopyable [nzCopyText]="task.url" [nzCopyTooltips]="null"
                       nz-popover nzPopoverContent="复制链接"
                       nzPopoverPlacement="topRight" nzPopoverTrigger="hover">
                    </a>
                    </span>
                  </nz-list-item-action>
                  <nz-list-item-action >
                    <a nz-icon nzType="close-square" nzTheme="outline"
                       nz-popover [nzPopoverContent]="task.status=='success'?'删除任务':'取消任务'"
                       nzPopoverPlacement="topRight" nzPopoverTrigger="hover"
                       (click)="delOfflineClick(task,id)">
                    </a>
                  </nz-list-item-action>
                </ul>
                <span *ngIf="!task.finished">加载中...</span>
                <span *ngIf="task.finished">
                大小：{{(task.finished | nzBytes)}}/{{(task.file.size | nzBytes)}}
                </span>
              </nz-list-item-meta-title>
            </nz-list-item-meta>
          </li>
        </ul>
      </cdk-virtual-scroll-viewport>
    </nz-tab>
  </nz-tabset>
